import React from 'react';
import { Space, Input, Button } from 'antd';
import styled from '@emotion/styled';
import { SearchOutlined } from '@ant-design/icons';

export default function BHeader(props) {
  return (
    <Header>
      {props.title ? (
        <h3>{props.title}</h3>
      ) : props.children ? (
        props.children
      ) : null}
      {props.hideSearch ? null : (
        <Space>
          <InputWrapper
            shape="round"
            style={props.style}
            placeholder={props.placeholder}
            defaultValue={props.defaultValue}
            onChange={props.onSearchChange}
            suffix={<SearchOutlined />}
          />
          {props.btn ? (
            props.btn
          ) : (
            <Button type="primary" shape="round" onClick={props.handleMethod}>
              {props.btnName}
            </Button>
          )}
        </Space>
      )}
    </Header>
  );
}

const Header = styled.div`
  background-color: #fff;
  display: flex;
  height: 100px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  H3 {
    font-size: 18px;
    font-weight: 500;
  }
`;

const InputWrapper = styled(Input)`
  width: 370px;
  height: 40px;
  border-radius: 20px;
  margin-right: 20px;
`;
